<template>
  <div class="mb-20 bg-white">
    <NavBar />
    <div class="flex justify-center">
      <div class="pt-7 pb-20" style="margin-top:79px;">
        <div class="container-width">
          <div class="flex flex-row  w-full">
            <MineLeftNav />
            <div class="flex-1 flex flex-col w-full">
              <div class="flex flex-col bg-[#F9F9F9]  w-full h-36">
                <div class="h-11 flex items-center border-b border-[#E0E0E0] pl-5 text-sm">
                  <div>我的动态</div>
                  <div style="margin-left:10px;text-align:center;width: 170px;height: 25px;border: 1px solid #FE7743;font-size: 12px;font-weight: 500;color: #FC9168;">您还不是VIP会员，立即加入</div>
                </div>
                <div class="h-24 pl-5 pt-8">
                  <input v-model="newsListQuery.newsname" type="text" class="w-72 py-2 px-2.5 h-8 sm:text-sm border border-slate-300" placeholder="搜索文章题目" />
                  <button class="ml-3 px-3 py-2 bg-[#FE7743] text-sm text-white" @click="handleFilter" style="cursor: pointer;">搜索</button>
                  <button class="ml-3 px-3 py-2 bg-[#FE7743] text-sm text-white" @click="handleCreate" style="cursor: pointer;">发布园区动态</button>
                </div>
              </div>
              <div class="flex flex-col bg-[#F2F2F2] w-full mt-6">
                <table class="border border-[#E6E6E6] text-sm">
                  <thead>
                    <tr>
                      <th class="border border-[#E6E6E6] text-left px-3 py-2 text-[#666666]">文章编号</th>
                      <th class="border border-[#E6E6E6] text-left px-3 py-2 text-[#666666]">文章名称</th>
                      <th class="w-36 border border-[#E6E6E6] text-left px-3 py-2 text-[#666666]">操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(item, index) in newsList" :key="index" class="bg-[#FFFFFF]">
                      <td class="border border-[#E6E6E6] px-3 py-2 text-[#7B7B7B]">{{ item.id }}</td>
                      <td class="border border-[#E6E6E6] px-3 py-2 text-[#7B7B7B]">{{ item.newsname }}</td>
                      <td class="w-36 flex border border-[#E6E6E6] px-3 py-2 text-[#7B7B7B]">
                        <button class="px-3 py-2 bg-[#2284C4] text-[12px] text-white" @click="handleUpdate(item)" style="cursor: pointer;">修改</button>
                        <button class="px-3 py-2 ml-3 bg-[#FE7743] text-[12px] text-white" @click="handleDelete(item)" style="cursor: pointer;">删除</button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <el-dialog
          title="发表动态"
          :visible.sync="dialogFormVisible"
          width="50%"
          :before-close="handleClose">
          <el-form ref="NewsForm" :model="NewsForm" :rules="NewsRules" class="edit-password-form" autocomplete="on" label-position="left">
            <el-form-item label="项目名称" prop="phonenumber">
              <el-input v-model="NewsForm.newsname"></el-input>
            </el-form-item>
            <el-form-item label="" prop="content">
              <Tinymce v-model="NewsForm.content" :height="300" />
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false" style="cursor: pointer;">取 消</el-button>
            <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()" style="cursor: pointer;">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import NavBar from "@/components/NavBar.vue"
import MineLeftNav from '@/components/MineLeftNav'
import { fetchMyNewsList, createNews, fetchNews, updateNews, deleteNews } from '@/api/news'
import Tinymce from '@/components/Tinymce'


export default {
  components: {
    MineLeftNav,
    Tinymce,
    NavBar
  },
  data() {
    return {
      newsList: [],
      newsListQuery: {
        newsname: undefined
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '修改',
        create: '新增'
      },
      NewsForm: {
        id: undefined,
        newsname: '',
        content: ''
      },
      NewsRules: {
        newsname: [{ required: true, message: '不能为空', trigger: 'blur' }],
        content: [{ required: true, message: '产值预计不能为空', trigger: 'blur' }]
      },
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      fetchMyNewsList(this.newsListQuery).then(res => {
        this.newsList = res.data
      })
    },
    handleFilter() {
      this.getList()
    },
    handleDialogClose(done) {
      this.$confirm('确认关闭？').then(() => {
        this.resetTemp()
        this.dialogFormVisible = false
        done()
      }).catch(() => {})
    },
    resetTemp() {
      this.NewsForm = {
        id: undefined,
        newsname: '',
        content: ''
      }
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['NewsForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['NewsForm'].validate((valid) => {
        if (valid) {
          createNews(this.NewsForm).then((res) => {
            if (res.result === 1) {
              this.getList()
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: res.msg,
                type: 'success',
                duration: 2000
              })
            } else {
              this.$notify({
                title: '错误',
                message: res.msg,
                type: 'error',
                duration: 2000
              })
            }
          })
        }
      })
    },
    handleUpdate(row) {
      this.resetTemp()
      fetchNews(row.id).then(res => {
        if (res.result === 1) {
          this.NewsForm = res.data
          this.dialogStatus = 'update'
          this.dialogFormVisible = true
          this.$nextTick(() => {
            this.$refs['NewsForm'].clearValidate()
          })
        } else {
          this.$notify({
            title: '错误',
            message: res.message,
            type: 'error',
            duration: 2000
          })
        }
      })
    },
    updateData() {
      this.$refs['NewsForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.NewsForm)
          updateNews(tempData).then((res) => {
            if (res.result === 1) {
              this.getList()
              // this.list.unshift(this.temp)
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: res.message,
                type: 'success',
                duration: 2000
              })
            } else {
              this.$notify({
                title: '错误',
                message: res.message,
                type: 'error',
                duration: 2000
              })
            }
          })
        }
      })
    },
    handleDelete(row, index) {
      deleteNews({ id: row.id }).then(res => {
        if (res.result === 1) {
          this.getList()
          this.$notify({
            title: '成功',
            message: res.message,
            type: 'success',
            duration: 2000
          })
        } else {
          this.$notify({
            title: '错误',
            message: res.message,
            type: 'error',
            duration: 2000
          })
        }
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？').then(() => {
        done();
      }).catch(() => {});
    }
  }
}

</script>

<style lang="scss" scoped>
</style>